<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { reactive, ref } from 'vue'
import{ type FormItemProps, type FormRules,type ElForm } from 'element-plus';
import type { userLogin } from '@/types/user';
// import { useLanguageStose } from '@/stores/language';


const {t,locale} = useI18n()

const changeMessageFn = (key:string)=>()=>t(key)

// const labelPosition = ref<FormProps['labelPosition']>('right')
const form = ref<typeof ElForm | null>(null)
const itemLabelPosition = ref<FormItemProps['labelPosition']>('top')
const formData = reactive<userLogin>({
  emallAndMobile: '',
  pwd: '',
  username:''
})
const remender = ref(false)
const formRules =reactive<FormRules<userLogin>>({
  emallAndMobile:[
    { required:true,message:changeMessageFn('login.eAndMInfo'),trigger:'blur'}
  ],
  pwd:[
    { required:true,message:changeMessageFn('login.pwdInfo'),trigger:'blur'}
  ],
  username:[
    { required:true,message:changeMessageFn('login.usernameInfo'),trigger:'blur'}
  ]
})
// 切换语言
const changeLanguageFn = ()=>{
  // console.log('切换成功')
  const language = locale.value === 'zh' ? 'en' :'zh'
  // useLanguage.setLanguage(language)
  localStorage.setItem('ca-language',language)
  locale.value = language
  form.value && form.value.resetFields()
}
// 切换登录
const isLogin = ref(true)
</script>

<template>
  <div class="login-page">
    <div class="banner-login">
      <div v-if="isLogin">
        <h3>{{$t('login.welcomeTitle')}}</h3>
        <p>{{ $t('login.welcomeText') }}</p>
      </div>
      <div v-else>
        <h3>{{$t('login.welAndRegister')}}</h3>
        <p>{{ $t('login.welAndText') }}</p>
      </div>
      <div class="login-change-language">
        <el-popconfirm
        class="box-item"
        width="220"
        :title="t('login.changeLanguage')"
        placement="right-end"
        @confirm="changeLanguageFn"
        >
        <template #reference>
          <svg>
            <path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z" />
          </svg>
        </template>
      </el-popconfirm>
      </div>
    </div>
    <div class="login-form" v-if="isLogin">
      <el-form
        ref="form"
        :rules="formRules"
        label-width="auto"
        :model="formData"
        style="max-width: 600px"
      >
        <el-form-item :label="$t('login.emallAndMobile')" :label-position="itemLabelPosition" prop="emallAndMobile">
          <el-input v-model="formData.emallAndMobile" />
        </el-form-item>
        <el-form-item :label="$t('login.pwd')" prop="pwd" :label-position="itemLabelPosition">
          <el-input v-model="formData.pwd" />
        </el-form-item>
        <el-checkbox v-model="remender" :label="$t('login.remember')" size="large" />
        <el-button>{{ $t('login.loginIn') }}</el-button>
      </el-form>
    </div>
    <div class="login-form" v-else>
      <el-form
        ref="form"
        :rules="formRules"
        label-width="auto"
        :model="formData"
        style="max-width: 600px"
      >
        <el-form-item :label="$t('login.emallAndMobile')" :label-position="itemLabelPosition" prop="emallAndMobile">
          <el-input v-model="formData.emallAndMobile" />
        </el-form-item>
        <el-form-item :label="$t('login.username')" :label-position="itemLabelPosition" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item :label="$t('login.pwd')" prop="pwd" :label-position="itemLabelPosition">
          <el-input v-model="formData.pwd" />
        </el-form-item>
        <el-button>{{ $t('login.registerIn') }}</el-button>
      </el-form>
    </div>
    <div class="sign-login">
      <p>{{ $t('login.signIn') }}</p>
      <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </div>
    <div class="icon">
      <el-icon>
        <lock />
      </el-icon>
      {{ $t('login.forgotPwd') }}
    </div>
    </div>
  </div>
  <div class="foot">
    <div v-if="isLogin">
      <p>{{ $t("login.isLogin") }} <span class="is-login" @click="isLogin=!isLogin">{{ $t("login.isLoginFn")}}</span></p>
    </div>
    <div v-else>
      <p>{{ $t("login.isRegister") }} <span class="is-login" @click="isLogin=!isLogin">{{ $t("login.isRegisterFn")}}</span></p>
    </div>
    <p>{{ $t('login.webInfo') }}</p>
  </div>
</template>

<style lang="scss" scoped>
.login-page{
  // width: 100%;
  margin: 48px auto;
  // padding: 48px;
  max-width: 480px;
  background-color: white;
  .banner-login{
    color: #4a62e7;
    text-align: left;
    // width: 100%;
    height: 120px;
    background: url(@/assets/login.png)  no-repeat right #d2d8fa;
    background-size: contain;
    border-radius: 5px 5px 0 0;
    // padding: 20px;
    h3{
      padding: 20px 0 0 20px;
    }
    p{
      line-height: 0;
      padding-left: 20px;
    }
    .login-change-language{
      margin-left: 20px;
      padding-left: 10px;
      svg{
        width: 25px;
        height:25px;
      }
    }
  }
  .login-form{
    padding: 10px 20px;
    .el-checkbox{
      // text-align: left;
      display: flex;
    }
    .el-button{
      width: 100%;
      background-color: #556ee6;
      color: white;
    }
  }
  .sign-login{
    height: 150px;
    .icon{
      margin-top: 10px;
      .el-icon{
        vertical-align: middle;

      }
      // width: 80px;
    }
  }
}
.foot{
  .is-login{
    color: #4a62e7;
    cursor: pointer;
  }
}
</style>
